﻿@page "/events/{url}"
@inject IHtmlLocalizer<EventHubResource> L
@inject ICurrentUser CurrentUser
@inject IClock Clock
@using EventHub.Localization
@using EventHub.Web
@using EventHub.Web.Pages.Events
@using EventHub.Events
@using EventHub.Options
@using EventHub.Web.Pages.Events.Components.AttendeesArea
@using EventHub.Web.Pages.Events.Components.EventsArea
@using EventHub.Web.Pages.Events.Components.LocationArea
@using EventHub.Web.Pages.Events.Components.RegistrationArea
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options
@using Volo.Abp.Timing
@using Volo.Abp.Users
@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Commenting
@model EventHub.Web.Pages.Events.DetailPageModel
@inject IOptions<EventHubUrlOptions> UrlOptions

@section scripts {
    <abp-script src="/Pages/Events/Detail.js"/>
}

@{
    string description = Model.Event.Description.Length >= 160 ? Model.Event.Description.TruncateWithPostfix(155) : Model.Event.Description;
    string title = Model.Event.Title;
    string coverImageUrl = UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{Model.Event.Id}";

    ViewBag.Title = title;
    ViewBag.Description = description;
    ViewBag.OgTitle = title;
    ViewBag.OgType = "event";
    ViewBag.OgDescription = description;
    ViewBag.TwitterTitle = title;
    ViewBag.TwitterDescription = description;
    ViewBag.TwitterImage = coverImageUrl;
    ViewBag.OgImage = coverImageUrl;
}

<div class="py-5">
    <div class="container detail-page pb-4">
        <div class="row">
            <div class="col-md-7">
                <div class="detail-image">
                    <img class="detail-img" src="@(UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{Model.Event.Id}")" alt="@Model.Event.Title">
                </div>
            </div>

            <div class="col-md-5 pl-md-5">
                <h1 id="EventTitle" class="mt-4 mt-md-0">@Model.Event.Title</h1>
                @await Component.InvokeAsync(typeof(LocationAreaViewComponent), new {eventId = Model.Event.Id})

                <h5 class="detail-head mt-4">Owner</h5>
                <div>
                    <a href="/users/@Model.Event.OwnerUserName">
                        <img gravatar-email="@Model.Event.OwnerEmail" default-image="Wavatar" gravatar-size="40" class="org-avatar avatar rounded-circle" data-bs-toggle="tooltip" title="@Model.Event.OwnerUserName"/>
                    </a>
                </div>
                @if (Model.IsEventOwner)
                {
                    <a href="/event/edit/@Model.Event.Url" class="btn btn-primary mt-4 text-white">
                        <i class="far fa-edit"></i> Edit
                    </a>
                }
                @await Component.InvokeAsync(typeof(RegistrationAreaViewComponent), new {eventId = Model.Event.Id})
                <h5 class="detail-head mt-5 font-weight-bold">Share Event</h5>
                <div class="share-container">
                    <a href="#" target="_blank" id="TwitterShareLink" title="Twitter">
                        <i class="fa-brands fa-square-x-twitter fa-2xl" style="color: #1e3051;"></i>
                    </a>
                    <a href="#" target="_blank" id="LinkedinShareLink" title="LinkedIn">
                        <i class="fa-brands fa-linkedin fa-2xl" style="color: #245ec2;"></i>
                    </a>
                    <a href="#" target="_blank" id="FacebookShareLink" title="Facebook">
                        <i class="fa-brands fa-square-facebook fa-2xl" style="color: #1c4b9b;"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 mt-4">
                <div class="card">
                    <div class="card-body p-5">
                        @if (Model.Event.Tracks.Any())
                        {
                            <abp-tabs class="detail-tabs">
                                <abp-tab class="tab" title="Description">
                                    <h5 class="detail-head mt-5 font-weight-bold">Event Description</h5>
                                    <p id="EventDescription">
                                        @Model.Event.Description
                                    </p>

                                    <h5 class="detail-head mt-5 font-weight-bold">Date</h5>
                                    <p>
                                        @EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime)
                                    </p>
                                    @await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new {eventId = Model.Event.Id})
                                </abp-tab>
                                <abp-tab class="tab" title=" Track / Session">
                                    <table class="table mt-3">
                                        <thead>
                                        <tr>
                                            @foreach (var track in Model.Event.Tracks)
                                            {
                                                @if (track.Sessions.Any())
                                                {
                                                    <th class="text-center" width="25%">@track.Name</th>
                                                }
                                            }
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            @foreach (var track in Model.Event.Tracks)
                                            {
                                                @if (track.Sessions.Any())
                                                {
                                                    <td>
                                                        @foreach (var session in track.Sessions)
                                                        {
                                                            <div class="track-item">
                                                                <span class="track-name">@session.Title.TruncateWithPostfix(55)</span>
                                                                <small class="text-primary d-block my-2">@EventDateHelper.GetTimeRangeText(TimeOnly.FromDateTime(session.StartTime), TimeOnly.FromDateTime(session.EndTime)) | @session.Language</small>
                                                                @foreach (var speaker in session.Speakers)
                                                                {
                                                                    <span class="d-block mb-2">@speaker.UserName</span>
                                                                }
                                                            </div>
                                                        }
                                                    </td>
                                                }
                                            }
                                        </tr>
                                        </tbody>
                                    </table>
                                </abp-tab>
                            </abp-tabs>
                        }
                        else
                        {
                            <h5 class="detail-head mt-5 font-weight-bold">Event Description</h5>
                            <p id="EventDescription">
                                @Model.Event.Description
                            </p>

                            <h5 class="detail-head mt-5 font-weight-bold">Date</h5>
                            <p>
                                @EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime)
                            </p>
                            @await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new {eventId = Model.Event.Id})
                        }
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 mt-4">
                <div class="card">
                    <div class="card-body p-5">
                        <div class="card-title">
                            <h4>@L["Comments"]</h4>
                        </div>
                        @await Component.InvokeAsync(typeof(CommentingViewComponent), new
                        {
                            entityType = "Event",
                            entityId = @Model.Event.Id.ToString()
                        })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container pt-5">
    <div class="row py-4">
        <div class="col-md">
            <h2>Events You Will Enjoy</h2>
        </div>
    </div>

    @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
    {
        minDate = Clock.Now.ClearTime(),
        MaxResultCount = 6,
        isPagination = false
    })
</div>